<template>
  <div>
    <div class="card">
      <div class="inputList">
        <div class="top">
          <a-input
            class="input"
            :allowClear="true"
            v-model="formData.search.trade_user_realname"
            placeholder="刷卡人"
          ></a-input>
          <a-input
            class="input"
            :allowClear="true"
            v-model="formData.search.trade_user_phone"
            placeholder="刷卡人手机号"
          ></a-input>
          <a-input
            class="input"
            :allowClear="true"
            v-model="formData.search.profit_user_realname"
            placeholder="刷卡人受益人"
          ></a-input>
          <a-input
            class="input"
            :allowClear="true"
            v-model="formData.search.profit_user_phone"
            placeholder="受益人手机号"
          ></a-input>
        </div>
        <div>
          <a-select
            placeholder="用户关系"
            :allowClear="true"
            v-model="formData.search.profit_user_type"
            style="width: 200px; margin-right: 10px"
          >
            <a-select-option v-for="(item, index) in userRelationshipoption" :key="index" :value="index">{{
              item
            }}</a-select-option>
          </a-select>
          <a-select
            :allowClear="true"
            placeholder="分润类型"
            v-model="formData.search.type"
            style="width: 200px; margin-right: 10px"
          >
            <a-select-option v-for="item in SeparationType" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-range-picker
            style="margin-right: 10px"
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']"
            v-model="dataList"
            @change="onChange"
            @ok="onOk"
          />
          <a-button class="button" type="primary" @click="getIncomeList">查询</a-button>
          <a-button class="button" @click="reset">重置</a-button>
          <a-button class="button" type="primary" @click="ceshi">导出</a-button>
        </div>
      </div>
      <p class="moneyStyle">当前搜索条件总分润金额为：{{ money }}元</p>
      <a-spin :spinning="loading">
        <a-table
          :pagination="{
            pageSize: formData.page_size,
            pageSizeOptions: ['20', '30', '40', '50'],
            size: 'small',
            showSizeChanger: true,
            showQuickJumper: true,
            total: total,
            current: formData.page,
            showTotal: total => `共 ${total} 条`
          }"
          @change="paginChange"
          show-size-changer
          show-quick-jumper
          :row-selection="rowSelection"
          bordered
          :columns="columns"
          :data-source="tableData"
        >
        </a-table>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { format } from 'date-fns'
import { getIncomeListAPI, getTypeOptionAPI } from '@/api/income.js'
export default {
  name: 'incomedetail',
  computed: {
    rowSelection() {
      return {
        onChange: (index, content) => {
          console.log(content)
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      dataList: [`${format(new Date(), 'yyyy-MM-dd')} 00:00:00`, `${format(new Date(), 'yyyy-MM-dd')} 23:59:59`],
      total: 0,
      formData: {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID,
          trade_user_realname: '', // 刷卡人
          trade_user_phone: '', // 刷卡人手机号
          profit_user_realname: '', //受益人
          profit_user_phone: '', // 受益人手机号
          start_time: `${format(new Date(), 'yyyy-MM-dd')} 00:00:00`, // 开始时间
          end_time: `${format(new Date(), 'yyyy-MM-dd')} 23:59:59`, // 结束时间
          profit_user_type: undefined, //用户关系
          type: undefined
        }
      },
      money: 0,
      userRelationshipoption: { 1: '间推', 2: '直推', 3: '自用' },
      SeparationType: [],
      columns: [
        {
          title: '交易时间',
          dataIndex: 'ctime'
        },
        {
          title: '刷卡人',
          dataIndex: 'trade_user_realname'
        },
        {
          title: '手机号',
          dataIndex: 'trade_user_phone'
        },
        {
          title: '刷卡人级别',
          dataIndex: 'trade_user_level_name'
        },
        {
          title: '刷卡金额',
          dataIndex: 'trade_amount'
        },
        {
          title: '刷卡费率',
          dataIndex: 'trade_rate'
        },
        {
          title: '收益人',
          dataIndex: 'profit_user_realname'
        },
        {
          title: '手机号',
          dataIndex: 'profit_user_phone'
        },
        {
          title: '收益人级别',
          dataIndex: 'profit_user_level_name'
        },
        {
          title: '收益人费率',
          dataIndex: 'profit_rate'
        },
        {
          title: '分润',
          dataIndex: 'type'
        },
        {
          title: '税费',
          dataIndex: 'tax_money'
        },
        {
          title: '实际分润',
          dataIndex: 'practical_money'
        },
        {
          title: '分润类型',
          dataIndex: 'info'
        },
        {
          title: '关系',
          dataIndex: 'profit_user_type'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getType()
    this.getPushInfo()
    this.getIncomeList()
  },
  methods: {
    ceshi() {
      console.log(`${format(new Date(), 'yyyy-MM-dd')} 00:00:00`)
    },
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getIncomeList()
    },
    reset() {
      this.formData = {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          start_time: `${format(new Date(), 'yyyy-MM-dd')} 00:00:00`, // 开始时间
          end_time: `${format(new Date(), 'yyyy-MM-dd')} 23:59:59`, // 结束时间
          trade_user_realname: '',
          trade_user_phone: '',
          profit_user_realname: '',
          profit_user_phone: '',
          profit_user_type: undefined,
          type: undefined
        }
      }
      this.getIncomeList()
    },
    async getType() {
      const result = await getTypeOptionAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.SeparationType = result.data
    },
    getPushInfo() {
      if (this.$route.query.data) {
        const info = JSON.parse(this.$route.query.data)
        this.formData.search.profit_user_realname = info.realname || ''
        this.formData.search.profit_user_phone = info.phone || ''
      } else {
        this.formData = {
          order: 'desc',
          order_by: 'id',
          page: 1,
          page_size: 50,
          search: {
            start_time: `${format(new Date(), 'yyyy-MM-dd')} 00:00:00`, // 开始时间
            end_time: `${format(new Date(), 'yyyy-MM-dd')} 23:59:59`, // 结束时间
            trade_user_realname: '',
            trade_user_phone: '',
            profit_user_realname: '',
            profit_user_phone: '',
            profit_user_type: undefined,
            type: undefined
          }
        }
      }
    },
    async getIncomeList() {
      try {
        this.loading = true
        const { data } = await getIncomeListAPI(this.formData)
        this.tableData = data.list
        this.total = data.total
        this.money = data.money
      } finally {
        this.loading = false
      }
    },
    changepage(value) {
      console.log(value)
    },
    onChange(value, dateString) {
      console.log(dateString)
      this.formData.search.start_time = dateString[0]
      this.formData.search.end_time = dateString[1]
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 10px;
  background-color: #fff;
}
.top {
  margin-bottom: 10px;
}
.input {
  margin-right: 10px;
  margin-right: 10px;
  width: 200px;
}
.button {
  margin-right: 10px;
}
.inputList {
  display: flex;
  flex-direction: column;
}
.moneyStyle {
  margin-top: 10px;
  padding: 10px;
  background-color: #f2f2f2;
  color: black;
}
</style>
